<template>
    <div class="hp-fcresult" style="overflow: hidden;">
        <div style="text-align: center;font-size: 15px;color: #fff;">夺冠预测</div>
        <div style="position: relative;padding: 0 10px;color: #fff;" v-if="dIsFetch">
            <br/>
            <div style="display: flex;justify-content: space-around;">
                <div v-for="(team,index) in dEight" :key="index" v-if="index<8" class="team">
                    <img class="flag" style="display: inline-block;width: 40px;height: 25px;border: none;background-color: #fff;" :src="team.img"/>
                    <div class="name" style=" width: 40px;height: 12px;line-height: 12px;font-size: 10px;text-align: center;padding: 5px 0;">{{team.team}}</div>
                </div>
            </div>
            <div class="lines" style="margin-bottom: 5px;display: flex;justify-content: space-around;">
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-bottom: 15px;border-top: none;" class="border border-bottom">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;bottom: -15px;"></div>
                </div>
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-bottom: 15px;border-top: none;" class="border border-bottom">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;bottom: -15px;"></div>
                </div>
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-bottom: 15px;border-top: none;" class="border border-bottom">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;bottom: -15px;"></div>
                </div>
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-bottom: 15px;border-top: none;" class="border border-bottom">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;bottom: -15px;"></div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-around;">
                <div v-for="(team,index) in dFour" :key="index" v-if="index<4" class="team">
                    <img class="flag" style="display: inline-block;width: 40px;height: 25px;border: none;background-color: #fff;" :src="team.img"/>
                    <div class="name" style=" width: 40px;height: 12px;line-height: 12px;font-size: 10px;text-align: center;padding: 5px 0;">{{team.team}}</div>
                </div>
            </div>
            <div class="lines" style="margin-bottom: 5px;display: flex;justify-content: space-around;">
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;width: 80px;margin-bottom: 15px;border-top: none;" class="border border-middle border-bottom">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;bottom: -15px;"></div>
                </div>
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;width: 80px;margin-bottom: 15px;border-top: none;" class="border border-middle border-bottom">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;bottom: -15px;"></div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-around;">
                <div v-for="(team,index) in dTwo" :key="index" v-if="index<2" class="team">
                    <img class="flag" style="display: inline-block;width: 40px;height: 25px;border: none;background-color: #fff;" :src="team.img"/>
                    <div class="name" style=" width: 40px;height: 12px;line-height: 12px;font-size: 10px;text-align: center;padding: 5px 0;">{{team.team}}</div>
                </div>
            </div>
            <div class="lines" style="margin-bottom: 5px;display: flex;justify-content: space-around;">
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;width: 170px;margin-bottom: 15px;border-top: none;" class="border border-large border-bottom">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;bottom: -15px;"></div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-around;">
                <div v-for="(team,index) in dOne" :key="index" v-if="index==0" class="team">
                    <img class="flag" style="display: inline-block;width: 40px;height: 25px;border: none;background-color: #fff;" :src="team.img"/>
                    <div class="name" style=" width: 40px;height: 12px;line-height: 12px;font-size: 10px;text-align: center;padding: 5px 0;">{{team.team}}</div>
                </div>
            </div>
            <div class="vs" style="position: relative;width: 1px;height: 40px;background-color: #fff;margin: 0 auto;">
                <div style="display: inline-block;position: absolute;width: 60px;height: 1px;top: 20px;background-color: #fff;"></div>
            </div>
            <div style="display: flex;justify-content: space-around;">
                <div v-for="(team,index) in dOne" :key="index" v-if="index==1" class="team">
                    <div class="name" style=" width: 40px;height: 12px;line-height: 12px;font-size: 10px;text-align: center;padding: 5px 0;">{{team.team}}</div>
                    <img class="flag" style="display: inline-block;width: 40px;height: 25px;border: none;background-color: #fff;" :src="team.img"/>
                </div>
            </div>
            <div class="lines" style="margin-bottom: 5px;display: flex;justify-content: space-around;">
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-top: 15px;border-bottom: none;width: 170px;" class="border border-large border-top">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;top: -15px;"></div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-around;">
                <div v-for="(team,index) in dTwo" :key="index" v-if="index>1" class="team">
                    <div class="name" style=" width: 40px;height: 12px;line-height: 12px;font-size: 10px;text-align: center;padding: 5px 0;">{{team.team}}</div>
                    <img class="flag" style="display: inline-block;width: 40px;height: 25px;border: none;background-color: #fff;" :src="team.img"/>
                </div>
            </div>
            <div class="lines" style="margin-bottom: 5px;display: flex;justify-content: space-around;">
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-top: 15px;border-bottom: none;width: 80px;" class="border border-middle border-top">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;top: -15px;"></div>
                </div>
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-top: 15px;border-bottom: none;width: 80px;" class="border border-middle border-top">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;top: -15px;"></div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-around;">
                <div v-for="(team,index) in dFour" :key="index" v-if="index>3" class="team">
                    <div class="name" style=" width: 40px;height: 12px;line-height: 12px;font-size: 10px;text-align: center;padding: 5px 0;">{{team.team}}</div>
                    <img class="flag" style="display: inline-block;width: 40px;height: 25px;border: none;background-color: #fff;" :src="team.img"/>
                </div>
            </div>
            <div class="lines" style="margin-bottom: 5px;display: flex;justify-content: space-around;">
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-top: 15px;border-bottom: none;" class="border border-top">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;top: -15px;"></div>
                </div>
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-top: 15px;border-bottom: none;" class="border border-top">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;top: -15px;"></div>
                </div>
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-top: 15px;border-bottom: none;" class="border border-top">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;top: -15px;"></div>
                </div>
                <div style="position: relative;width: 40px;height: 15px;border: 1px solid #fff;margin-top: 15px;border-bottom: none;" class="border border-top">
                    <div style="position: absolute;display: inline-block;width: 1px;height: 15px;left: 50%;background-color: #fff;top: -15px;"></div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-around;">
                <div v-for="(team,index) in dEight" :key="index" v-if="index>7" class="team">
                    <div class="name" style=" width: 40px;height: 12px;line-height: 12px;font-size: 10px;text-align: center;padding: 5px 0;">{{team.team}}</div>
                    <img class="flag" style="display: inline-block;width: 40px;height: 25px;border: none;background-color: #fff;" :src="team.img"/>
                </div>
            </div>
            <!-- <div class="final">
                <div v-for="(team,index) in dWiner" :key="index">{{['冠军','亚军','季军'][index]}}: {{team.team}}</div>
            </div> -->
            <div class="final" style="height: 50px;position: absolute;top: 0;left: 50%;right: 0;bottom: 0;margin: auto;">
                <div class="icon-winer" style="display: inline-block;width: 25px;height: 50px;background-image: url('~assets/images/champin.png');background-repeat: no-repeat;background-size: 50px;background-position: center center;vertical-align: middle;margin-left: 60px;margin-top: 10px;"></div>
                <div class="final-text" style="display: inline-block;line-height: 50px;vertical-align: middle;">{{dWiner[0].team}}</div>
            </div>
        </div>
        <div class="bottom" style="margin: 30px 20px;">
            <div class="erweima" style="float: left;width: 150px;height: 150px;background-repeat: no-repeat;background-size: 150px;background-position: center;background-image: url('~assets/images/erweima.png');"></div>
            <div class="text" style="margin-left: 170px;color: #fff;line-height: 2em;">识别二维码 关注小程序</div>
            <div class="text" style="margin-left: 170px;color: #fff;line-height: 2em;">为你喜欢的球队投个票</div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import util from '@/common/util'
export default {
    data () {
        return {
            dEight: [],
            dFour: [],
            dTwo: [],
            dOne: [],
            dWiner: [],
            dIsFetch: false
        }
    },
    created () {
        this.fetch();
    },
    methods: {
        fetch () {
            axios.get('/api/java/predict/getAllPredict?openid='+window.app.openId).then((res) => {
                this.dIsFetch = true;
                if (!res.data.data || res.data.data.length == 0) {
                    util.alert('您还没有预测，点击【确定】后自动跳转到预测页面！','提示').then(action => {
                        this.$router.push({name: 'vote'});
                    });
                    return;
                }
                this.parse(res.data.data);
            })
        },
        parse (data) {
            data.knockouts.some((item) => {
                if (item.matchType == 6) {
                    item.matches.forEach((match) => {
                        this.dOne.push({
                            team: match.homeCountryName,
                            id: match.homeCountryId,
                            img: match.homeCountryImg
                        });
                        this.dOne.push({
                            team: match.awayCountryName,
                            id: match.awayCountryId,
                            img: match.awayCountryImg
                        });
                        //冠军
                        this.dWiner.push(match.winCountryCode==match.homeCountryId?{
                            team: match.homeCountryName,
                            id: match.homeCountryId,
                            img: match.homeCountryImg
                        }:{
                            team: match.awayCountryName,
                            id: match.awayCountryId,
                            img: match.awayCountryImg
                        });
                        //季军
                        this.dWiner.push(match.winCountryCode==match.homeCountryId?{
                            team: match.awayCountryName,
                            id: match.awayCountryId,
                            img: match.awayCountryImg
                        }:{
                            team: match.homeCountryName,
                            id: match.homeCountryId,
                            img: match.homeCountryImg
                        });
                    })
                    return true;
                }
                return false;
            });
            data.knockouts.some((item) => {
                if (item.matchType == 5) {
                    item.matches.forEach((match) => {
                        this.dWiner.push(match.winCountryCode==match.homeCountryId?{
                            team: match.awayCountryName,
                            id: match.awayCountryId,
                            img: match.awayCountryImg
                        }:{
                            team: match.homeCountryName,
                            id: match.homeCountryId,
                            img: match.homeCountryImg
                        });
                    })
                    return true;
                }
                return false;
            });
            data.knockouts.some((item) => {
                if (item.matchType == 4) {
                    item.matches.forEach((match) => {
                        this.dOne.forEach((team,index) => {
                            if (match.winCountryCode == team.id) {
                                this.dTwo.splice(index*2, 0, {
                                    team: match.homeCountryName,
                                    id: match.homeCountryId,
                                    img: match.homeCountryImg
                                });
                                this.dTwo.splice(index*2+1, 0, {
                                    team: match.awayCountryName,
                                    id: match.awayCountryId,
                                    img: match.awayCountryImg
                                });
                            }
                        })
                    })
                    return true;
                }
                return false;
            });
            console.log(this.dTwo);
            data.knockouts.some((item) => {
                if (item.matchType == 3) {
                    item.matches.forEach((match) => {
                        this.dTwo.forEach((team,index) => {
                            if (match.winCountryCode == team.id) {
                                this.dFour.splice(index * 2, 0, {
                                    team: match.homeCountryName,
                                    id: match.homeCountryId,
                                    img: match.homeCountryImg
                                });
                                this.dFour.splice(index * 2 + 1, 0, {
                                    team: match.awayCountryName,
                                    id: match.awayCountryId,
                                    img: match.awayCountryImg
                                });
                            }
                        })
                    })
                    return true;
                }
                return false;
            });
            data.knockouts.some((item) => {
                if (item.matchType == 2) {
                    item.matches.forEach((match) => {
                        this.dFour.forEach((team,index) => {
                            if (match.winCountryCode == team.id) {
                                this.dEight.splice(index*2, 0, {
                                    team: match.homeCountryName,
                                    id: match.homeCountryId,
                                    img: match.homeCountryImg
                                });
                                this.dEight.splice(index*2+1, 0, {
                                    team: match.awayCountryName,
                                    id: match.awayCountryId,
                                    img: match.awayCountryImg
                                });
                            }
                        })
                    })
                    return true;
                }
                return false;
            });
        }
    }
}
</script>
<style lang="less" scoped></style>

